<script setup>
import { Link } from '@inertiajs/vue3'
import Icon from '@/Components/Icon.vue'



</script>

<template>
    <div>

        <div class="mb-4">
            <Link class="group flex items-center py-3" :href="route('users.index')">
                <Icon name="users" class="mr-2 w-4 h-4" :class="route().current('users.index') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
                <div :class="route().current('users.index') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Users</div>
            </Link>
        </div>
        <div class="mb-4">
            <Link class="group flex items-center py-3" :href="route('organizations.index')">
                <Icon name="offices" class="mr-2 w-4 h-4" :class="route().current('organizations.index') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
                <div :class="route().current('organizations.index') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Organizations</div>
            </Link>
        </div>
        <div class="mb-4">
            <Link class="group flex items-center py-3" :href="route('contacts.index')">
                <Icon name="users" class="mr-2 w-4 h-4" :class="route().current('contacts.index') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
                <div :class="route().current('contacts.index') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Contacts</div>
            </Link>
        </div>
        <div class="mb-4">
            <Link class="group flex items-center py-3" :href="route('reports.index')">
                <Icon name="printer" class="mr-2 w-4 h-4" :class="route().current('reports.index') ? 'fill-white' : 'fill-indigo-400 group-hover:fill-white'" />
                <div :class="route().current('reports.index') ? 'text-white' : 'text-indigo-300 group-hover:text-white'">Reports</div>
            </Link>
        </div>

    </div>
</template>